<template>
  <div class="sweetui-demo-comp">
    <ComponentTitle :property="config.config.property" />

    <sweet-config-provider>
      <div class="sweetui-demo">
        <h2 class="hs">下面是命名空间默认为el的sweetui组件</h2>
        <div class="demo-block">
          <div class="demonstration">标题1：</div>
          <h2>{{ config.config.property.titleValue1 }}</h2>
        </div>
        <sweet-button @click="open">默认按钮</sweet-button>
        <sweet-button type="primary" @click="openSuccess">主要按钮</sweet-button>
        <div class="sweetuiicon">
          <i class="sweetui-icon-add-a-subnode-f"></i>
          <i class="sweetui-icon-add-l"></i>
          <i class="sweetui-icon-area-map-f"></i>
          <i class="sweetui-icon-advanced-filter-l"></i>
        </div>
        <div class="sweetuiicon">
          <IconGenexACP></IconGenexACP>
          <Icon3dF></Icon3dF>
          <Icon3dL></Icon3dL>
          <IconAddF></IconAddF>
        </div>
      </div>
    </sweet-config-provider>

    <sweet-config-provider namespace="sweet">
      <div class="sweetui-demo">
        <h2 class="hs">下面是命名空间为sweet的sweetui组件</h2>
        <div class="demo-block">
          <div class="demonstration">标题2：</div>
          <h2>{{ config.config.property.titleValue2 }}</h2>
        </div>
        <sweet-button @click="open">默认按钮</sweet-button>
        <sweet-button type="primary" @click="openSuccess">主要按钮</sweet-button>
        <div class="sweetuiicon">
          <i class="sweetui-icon-add-a-subnode-f"></i>
          <i class="sweetui-icon-add-l"></i>
          <i class="sweetui-icon-area-map-f"></i>
          <i class="sweetui-icon-advanced-filter-l"></i>
        </div>
        <div class="sweetuiicon">
          <IconGenexACP></IconGenexACP>
          <Icon3dF></Icon3dF>
          <Icon3dL></Icon3dL>
          <IconAddF></IconAddF>
        </div>
      </div>
    </sweet-config-provider>

    <div class="sweetui-demo">
      <h2 class="hs">下面是elementplus组件</h2>
      <div class="demo-block">
        <div class="demonstration">标题3：</div>
        <h2>{{ config.config.property.titleValue3 }}</h2>
      </div>
      <el-button @click="openEl">默认按钮</el-button>
      <el-button type="primary" @click="openElSuccess">主要按钮</el-button>
      <div class="sweetuiicon">
        <el-icon><Plus /></el-icon>
        <el-icon><Minus /></el-icon>
        <el-icon><CirclePlus /></el-icon>
        <el-icon><Search /></el-icon>
      </div>
      <div class="sweetuiicon">
        <Edit style="width: 1em; height: 1em; margin-right: 8px" />
        <Share style="width: 1em; height: 1em; margin-right: 8px" />
        <Delete style="width: 1em; height: 1em; margin-right: 8px" />
        <Search style="width: 1em; height: 1em; margin-right: 8px" />
      </div>
    </div>

  </div>
</template>
<script>
import { SweetMessage } from '@hw-seq/sweet-ui-base'
import chartBase from '@/mixin/chart-base.js';
import ComponentTitle from '../common/component-title/component-title.vue';
import config from './config/config';
export default {
  name: 'SweetuiDemoComponent',
  components: { ComponentTitle },
  mixins: [chartBase],
  props: ['widgetInstanceId','w', 'h'],
  data() {
    return {
      orgConfig: null,
      config: null,
    };
  },
  created() {
    this.orgConfig = config;
    this.config = JSON.parse(JSON.stringify(this.orgConfig));
  },
  methods: {
    loadWidget() {
      console.log('旧-sweetui样例组件');
      this.afterLoadWidget();
    },
    open() {
      SweetMessage('this is a message.');
    },
    openSuccess() {
      SweetMessage.success('Successfully.');
    },
    openEl() {
      this.$message('this is a message from ElementPlus.');
    },
    openElSuccess() {
      this.$message.success('Successfully from ElementPlus.');
    },
  },
}
</script>

<style lang="less" scoped>
.sweetui-demo-comp {
  width: 100%;
  height: 100%;
  background-color: aliceblue;
  overflow: scroll;
}
.sweetui-demo {
  padding: 20px;
}
.hs {
  margin-bottom: 10px;
}
.sweetuiicon {
  margin-top: 20px;
  font-size: 20px;
  i, svg {
    margin-right: 10px;
  }
}
.demo-block {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.demonstration {
  margin-right: 20px;
  font-size: 18px;
}
</style>